<template>
	<!-- 项目选择组件 -->
	<view>
		<u-popup :show="showflak" @close="close" mode="left" :zIndex="10088" :overlayStyle="{zIndex:'10088'}"
			:customStyle="{width:'80vw',height:'100vh',}">
			<scroll-view :scroll-y="true" style="height: 100%;overflow-y: auto;" @scrolltolower="lower">
				<view class="list" style="padding: 20px 0;">
					<view
						style="position: sticky;top:0px;width: 100%;background-color: #fff;padding-top: 20px;margin-bottom: 15px;">
						<uni-easyinput suffixIcon="search" v-model="searchvalue" placeholder="搜索项目名称" type="text"
							confirmType="search" @iconClick="search" @confirm="search"
							style="width:80%;margin: 0 auto;" />

					</view>
					<view class="rightItem" v-if="showAdd" @click="handleRightAdd" style="height: 80rpx;">
						<view class="add">
							<uni-icons type="plusempty" style="font-size: 80rpx;color: #999;"></uni-icons>
						</view>
					</view>
					<view class="rightItem" v-else @click="handleRight({Id:'',Name:''})" style="height: 80rpx;">
						<view class="add">
							全部项目
						</view>
					</view>
					<view class="rightItem" v-for="item in data" :key="item.Id" @click="handleRight(item)">
						<view class="title">
							<text>{{item.ProjectName}}</text>

						</view>
						<view class="userInfo">
							<view class="user">
								{{item.ProjectCreatorRealName}}
							</view>
							<view class="time" style="display: flex;justify-content: space-between;">
								<view class="">
									{{item.ModifyDate.substring(0,10)}}
								</view>
								<view class="" style="	width: 22px;">
									<image style="width:100%;height:100%" v-if="item.IsCollect" src="/static/star1.png"
										mode="aspectFit">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="">
					<uniLoadMore :status="status" :contentText="contentText" :rows="data"></uniLoadMore>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup :show="showadd" @close="showaddclose" mode="center" closeable :zIndex="10089" :round="10"
			:overlayStyle="{zIndex:'10089'}" :customStyle="{width:'80vw',}">
			<uni-title type="h4" title="添加项目" style="margin: 0 auto;"></uni-title>
			<view style="width: 100%;padding: 20px;">
				<uni-forms :modelValue="formData" label-position="top" ref="form" :rules="rules">
					<uni-forms-item label="项目名称" name="Name" required>
						<uni-easyinput type="text" v-model="formData.Name" placeholder="请输入项目名称" />
					</uni-forms-item>
					<uni-forms-item label="参与人员" name="name" :label-width="80">
						<p style="width: 100%;height: 100%;display: flex;align-items: center;"><button
								@click="$refs.PopupCheckboxs.open('noProjectID')" size="mini" style="width: 100%;" plain
								type="primary">添加</button>
						</p>
					</uni-forms-item>
					<view class="tag-view" style="display: flex;flex-wrap: wrap;">
						<uni-tag :text="item.NickName||item.Name" type="primary" v-for="item in userList" :key="item.Id"
							inverted style="margin-right: 5px;margin-bottom: 5px;" />
					</view>
				</uni-forms>
				<PopupCheckboxs ref="PopupCheckboxs" @subclickRow="subclickRow"></PopupCheckboxs>
				<button type="primary" @click="dialogInputConfirm">保存</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getNowDate
	} from '../../utils/tools.js'
	import PopupCheckboxs from '../../pages/List/cPage/PopupCheckboxs.vue'
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		name: "listitem",
		props: {
			showAdd: {
				require: false,
				type: Boolean,
				default: true
			}
		},
		components: {
			PopupCheckboxs,
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				showadd: false,
				formData: {},
				data: [],
				rules: {
					Name: {
						rules: [{
							required: true,
							errorMessage: '请输入项目名称',
						}]
					},

				},
				searchvalue: '',
				showflak: false,
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "Id",
					SortType: "desc",
				},
				userInfo: {},
				userList: [],
				openType: "" //打开的类型。 是从编辑页面进来打开的，还是上传页面进来打开的
			};
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			// 顶部搜索框搜索
			search() {
				this.pagination.PageIndex = 1
				// 刷新列表数据
				this.getDataList()
			},

			// 选择参与人
			subclickRow(row) {
				console.log(row);
				this.userList = row
			},
			showaddclose() {
				this.showadd = false
			},
			dialogInputConfirm(e) {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$http('Base_ProjectWork/Base_Project/SaveData', {
						...this.formData,
						ProUserList: this.userList.map(item => {
							return {
								UserId: item.MailUserId,
								UserName: item.Name,
								PhoneNumber: item.Phone,
								CreateTime: item.CreateTime
							}
						})
					}).then(res => {
						uni.hideLoading()
						if (res.Success) {
							this.showadd = false
							this.getDataList('open')
							// 直接进到当前项目下的任务里
							this.$emit('itemClick', res.Data)
							// 关闭当前项目弹窗
							this.close()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			// 项目选中
			handleRight(item) {
				console.log('项目选中', item)
				this.$emit('itemClick', item, this.openType)
				this.close()
			},
			handleRightAdd() {
				this.showadd = true
				this.$set(this.formData, 'Name', this.userInfo.Name ? this.userInfo.Name : "" + getNowDate().split(' ')[
					0] +
					'创建')
			},
			close() {
				this.showflak = false
				// uni.showTabBar()
			},
			open(type) {
				this.openType = type
				// uni.hideTabBar()
				this.showflak = true
				this.searchvalue = ''
				this.userList = []
				this.pagination.PageIndex = 1
				this.getDataList()
			},
			// 获取项目列表数据数据获取
			getDataList(open) {
				this.data = []
				this.status = "loading"
				uni.showLoading()
				this.$http("Base_ProjectWork/Base_ProjectPartake/GetProjectPartakeList", {
						...this.pagination,
						Search: {
							"Condition": "Name",
							"Keyword": this.searchvalue,
							UserId: this.userInfo.Id
						}
					})
					.then((res) => {
						uni.hideLoading()
						if (res.Success) {
							if (res.Data.length == 0) {
								this.status = "noMore"
								return
							}
							this.data = res.Data;
							// if (open) this.handleRight(this.data[0])
							this.total = res.Total
							if (this.data.length >= this.total) {
								this.status = "noMore"
								return
							}
						}
					});
			},
			// 下拉加载
			lower() {
				if (this.data.length >= this.total) {
					this.status = "noMore"
					return
				}
				uni.showLoading()
				this.status = "loading"
				this.pagination.PageIndex++
				this.$http("Base_ProjectWork/Base_ProjectPartake/GetProjectPartakeList", {
						...this.pagination,
						Search: {
							"Condition": "Name",
							"Keyword": this.searchvalue,
							UserId: this.userInfo.Id
						}
					})
					.then((res) => {
						uni.hideLoading()
						if (res.Success) {
							this.data = this.data.concat(res.Data)
							this.total = res.Total
							if (this.data.length >= this.total) {
								this.status = "noMore"
								return
							}
						}
					});
			},
		}
	}
</script>

<style lang="scss">

</style>